import React from "react";
import {
  Input,
  Tabs,
  Select,
  Card,
  Row,
  Col,
  Typography,
  Avatar,
  Statistic,
} from "antd";
import "./index.less";

const { Title, Text } = Typography;
const { TabPane } = Tabs;
const { Option } = Select;
const { Search } = Input;

const AppSearch: React.FC = () => {
  const apps = [
    {
      title: "Alipay",
      icon: "https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png",
      stats: {
        activeUsers: "17万",
        newUsers: "1,581",
      },
    },
    {
      title: "Angular",
      icon: "https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png",
      stats: {
        activeUsers: "15万",
        newUsers: "1,316",
      },
    },
  ];

  return (
    <div className="app-search-page" data-oid="dfv5zsq">
      <div className="header" data-oid="to2b15s">
        <Title level={2} data-oid="q018t0.">
          搜索列表（应用）
        </Title>
        <Search
          placeholder="请输入"
          enterButton="搜索"
          size="large"
          style={{ width: 300 }}
          data-oid="tj_9b8r"
        />
      </div>

      <Tabs defaultActiveKey="app" data-oid="2-a_ueb">
        <TabPane tab="文章" key="article" data-oid="qvy7j02" />
        <TabPane tab="项目" key="project" data-oid="4n9ckxr" />
        <TabPane tab="应用" key="app" data-oid="z-89_64" />
      </Tabs>

      <Card className="filter-panel" data-oid="okeammt">
        <div className="filter-row" data-oid="lg-4qzl">
          <Text data-oid="o8coqo0">所属类目：</Text>
          <Select defaultValue="全部" style={{ width: 120 }} data-oid="31n28ss">
            <Option value="全部" data-oid="9n:fvbt">
              全部
            </Option>
            <Option value="类目1" data-oid="fa336rf">
              类目1
            </Option>
            <Option value="类目2" data-oid="b4uxi2_">
              类目2
            </Option>
          </Select>
        </div>
        <div className="filter-row" data-oid="o:yoee-">
          <Text data-oid="v:vpij4">其它选项：</Text>
          <Select defaultValue="不限" style={{ width: 120 }} data-oid="lqdlg9j">
            <Option value="不限" data-oid=".g_deqi">
              不限
            </Option>
          </Select>
          <Text data-oid="tgoyaw8">好评度：</Text>
          <Select defaultValue="不限" style={{ width: 120 }} data-oid="d2t_tdj">
            <Option value="不限" data-oid="37l7d9c">
              不限
            </Option>
          </Select>
        </div>
      </Card>

      <Row gutter={[16, 16]} className="app-grid" data-oid=":dy-3ch">
        {apps.map((app, index) => (
          <Col xs={24} sm={12} md={8} lg={6} key={index} data-oid="s9ovw54">
            <Card hoverable className="app-card" data-oid="65qw7_y">
              <div className="app-header" data-oid="2umqz9y">
                <Avatar
                  size={48}
                  src={app.icon}
                  alt={app.title}
                  className="app-icon"
                  data-oid="xphlluh"
                />

                <Title level={4} className="app-title" data-oid="pbzhk.c">
                  {app.title}
                </Title>
              </div>
              <div className="app-stats" data-oid="a4jjmq7">
                <Statistic
                  title="活跃用户"
                  value={app.stats.activeUsers}
                  className="stat-item"
                  data-oid="rkbwzz2"
                />

                <Statistic
                  title="新增用户"
                  value={app.stats.newUsers}
                  className="stat-item"
                  data-oid="hat9gwo"
                />
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default AppSearch;
